<!--
  - Copyright (c) 2018.
  - 北京九思金信科技有限公司对该文件内容保留所有权利。
  - 未经许可，不得私自拷贝、传播、发布、引用该文件内容，违者将被追究法律责任。
  -->

<template>
  <div>
    <!--<el-row class="row-bg" type="flex" align="middle">-->
      <!--<p style="padding: 0;margin: 0"><b>消息模板关键字信息</b>  配置消息模板类型及每个类型下的关键字-->
      <!--</p>-->
    <!--</el-row>-->
    <el-card >
        <div style="text-align: left;margin-bottom: 10px">
          <el-button round size="small" type="primary" icon="el-icon-plus"  @click="add">添加关键字</el-button>
        </div>
        <el-table :data="messageKeyPage" row-key="messageKeyId">
          <el-table-column label="关键字名称" prop="keyName" align="left">
            <template slot-scope="scope">
              <el-input v-model="scope.row.keyName" v-if="scope.row.status=='editing'"></el-input>
              <span v-else>{{scope.row.keyName}}</span>
            </template>
          </el-table-column>
          <el-table-column label="关键字编码" prop="keyCode" align="left">
            <template slot-scope="scope">
              <el-input v-model="scope.row.keyCode" v-if="scope.row.status=='editing'"></el-input>
              <span v-else>{{scope.row.keyCode}}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                type="text" size="small"
                @click="save(scope.$index, scope.row)" v-if="scope.row.status=='editing'">保存
              </el-button>
              <el-button type="text" size="small" @click="cancel(scope.$index,scope.row)"
                         v-if="scope.row.status=='editing'">
                取消
              </el-button>
              <el-button
                size="mini"
                type="text"
                @click="handleEdit(scope.$index, scope.row)" v-if="scope.row.status!='editing'&&if_display=='Y'">修改
              </el-button>
              <em class="key_em_cs"
                  v-if="scope.row.status!='editing'&&if_display=='Y'">|
              </em>
              <el-popover v-if="scope.row.status!='editing'"
                          placement="top"
                          width="160"
                          v-model="scope.row.delVisible">
                <p>确定删除吗？</p>
                <div style="text-align: right; margin: 0">
                  <el-button size="small" type="text" @click="scope.row.delVisible = false">取消</el-button>
                  <el-button type="primary" size="small" @click="handleDelete(scope.$index, scope.row)">确定</el-button>
                </div>
                <el-button slot="reference" type="text" size="small" style="color: #b96463">删除</el-button>
              </el-popover>
            </template>
          </el-table-column>
        </el-table>
    </el-card>
  </div>
</template>

<script>
    import MessageTemplateSelect from "./messageSelect/MessageTemplateSelect";
    export default {
      name: "MessageTemplateKey",
      props:['templateTypeId'],
      components: {MessageTemplateSelect},
      data() {
        return {
          disabled: null,
          messageKeyPage: [],
          templateType:null,
          keyName:null,
          keyCode:null,
          if_display: "Y",
          totalRowNum: null,
          //临时克隆对象，用于修改取消还原数据
          obj: {}
        }
      },
      mounted(){
        this.loadMessageKeyPage()
      },
      methods: {
        //分页查询
        loadMessageKeyPage() {
          this.messageKeyPage = []
          this.disabled = null
          this.if_display = "Y"
          const url='/joys-rest/joys-admin/messageKeyInfo/keyList/'+this.templateTypeId
            this.$http.get(url).then(resp => {
              this.messageKeyPage = resp.data
            }).catch(err => {
              this.$message.error(err.response.data.message)
            })
        },
        add() {
          // 默认类型
          var defaultTemplateType = null
          if (this.messageKeyPage.length) {
            defaultTemplateType = this.messageKeyPage[0].templateType
          }
          this.messageKeyPage.unshift({
            templateType:defaultTemplateType,
            keyCode: null,
            keyName: null,
            status: 'editing',
          })
          this.if_display = "N"
          this.disabled = true
        },
        save(index, value) {
          if (value.keyCode == null) {
            this.$message({
              message: '关键字编码不能为空',
              type: 'warning'
            });
            return
          }
          if (value.keyName == null) {
            this.$message({
              message: '关键字名称不能为空',
              type: 'warning'
            });
            return
          }
          value.templateTypeId=this.templateTypeId
          const url='/joys-rest/joys-admin/messageKeyInfo/saveKey'
          this.$http.put(url, value).then(resp => {
            value = resp.data
            value.status = "noEditing"
            this.$set(this.messageKeyPage, index, value)
            this.if_display = 'Y'
            this.disabled = null
            console.log(resp.data)
            this.$message({
              message: '保存成功',
              type: 'success'
            });
          }).catch(err => {
            this.$message.error(err.response.data.message)
          })
        },
        cancel(index, vo) {
          this.if_display = 'Y'
          this.disabled = null
          if (vo.messageKeyId != null) {
            //还原数据
            vo = JSON.parse(JSON.stringify(this.obj));
            vo.status = "noEditing"
            this.$set(this.messageKeyPage, index, vo)
          } else {
            this.messageKeyPage.splice(index, 1)
          }
        },
        handleEdit(index, vo) {
          vo.status = "editing"
          this.if_display = 'N'
          this.disabled = true
          //克隆，取消修改时使用
          this.obj = JSON.parse(JSON.stringify(vo));
        },
        handleDelete(index, vo) {
          const url='/joys-rest/joys-admin/messageKeyInfo/' + vo.messageKeyId
          this.$http.delete(url).then(resp => {
            this.messageKeyPage.splice(index, 1)
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          }, resp => {
            this.$message({
              type: 'failed',
              message: '删除失败!'
            })
          });
        }
      }
    }
</script>
<style>
  .message-template-key__toolbar{
    display: flex;
    justify-content: flex-start;
    text-align: left;
  }
</style>

<style scoped>
  .button-bar {
    display: inline-block;
    width: 150px;
    padding: 8px 0;
    vertical-align: top;
  }

  .input-bar {
    display: inline-block;
    width: calc(100% - 210px);
    font-size: 0px;
    vertical-align: top;
  }
  .row-bg {
    height:50px;
    background-color: #E4E8EB;
    font-size: 13px;
    padding-left: 20px;
  }
  .key_em_cs{
    font-family: PingFangSC-Regular;
    font-size: 13px;color:
    rgba(27,-2147483648,-2147483648,0.40);
    line-height: 13px;
    font-style:normal
  }
</style>
